<template>
  <a-modal v-model:visible="phoneVisible" title="请选择手机号" centered :maskClosable='false' :closable="false" :footer='null' style="height: 500px;">
    <h1 tabindex="-1" class="tk-intro">
      验证你的身份
    </h1>
    <div class="phones-list">
      <div class="border-bottom" v-for="(item,index) in phoneList" :key='index'>
        <a-row class="ax-outline" @click="onResultPhone(index+1)">
          <a-col :span="18">
            <div class="si-phone-name">{{item}}</div>
            <div>短信</div>
          </a-col>
          <a-col :span="6">
            <div class="arrow">
              <RightOutlined />
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
    <p class="tk-text">
      请选择一个电话号码接收验证码。
    </p>
  </a-modal>
</template>

<script lang='ts'>
import { reactive, SetupContext, toRefs } from "vue";
import { RightOutlined } from "@/components/AntDesign/icons/icons";
export default {
  components: {
    RightOutlined,
  },
  props: {
    phoneVisible: {
      type: Boolean,
      default: false,
    },
    phoneList: {
      type: Array,
      default: [],
    },
  },
  emits: ["onPhoneVisible"],
  setup(props: any, ctx: SetupContext<"onPhoneVisible"[]>) {
    const data = reactive({});

    function onResultPhone(index: number) {
      ctx.emit("onPhoneVisible", index);
    }

    return {
      ...toRefs(data),
      onResultPhone,
    };
  },
};
</script>
<style lang="less" scoped>
.tk-intro {
  text-align: center;
  font-size: 21px;
  line-height: 1.38105;
  font-weight: 400;
  letter-spacing: 0.011em;
  font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial,
    sans-serif;
}

.tk-text {
  margin: 15px auto;
  width: 60%;
  text-align: center;
}

.phones-list {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #d5d5d5;
  border-radius: 7px;

  .border-bottom:not(:last-child) {
    border-bottom: 1px solid #d5d5d5;
  }

  .ax-outline {
    height: 60px;
    cursor: pointer;
    padding: 0 15px;
    .si-phone-name {
      text-align: left;
      font-size: 18px;
    }

    .arrow {
      line-height: 60px;
      font-size: 18px;
      text-align: right;
    }
  }
}
</style>